<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>

    .center{
      width: 1200px;
      margin: 0 auto;
      overflow-x: hidden;
      margin-top: 20px
    }
    .left{
      margin-top: 30px;

      border-radius: 5px;
      height: 400px;
    }
    .right{
      margin-top: 30px;

      border-radius: 5px;
      height: 320px;
      display: flex;
      flex-direction: column;
    }


    .right > div:nth-child(1) {
      flex: 1; /* 上层占1/5 */
    }

    .right > div:nth-child(2) {
      flex: 2; /* 中间层占3/5 */
    }

    .right > div:nth-child(3) {
      flex: 1; /* 下层占1/5 */
    }
    .right > div:nth-child(4) {
      flex: 1; /* 下层占1/5 */
    }
    .button{
      display: flex;
      align-items: center; /* 垂直居中对齐 */
      justify-content: center; /* 水平居中对齐 */
      font-size: 40px;

    }
    .el-button{
      font-size: 20px;
    }
    .coursetitle{
      font-size: 25px;
      font-weight: bold;

    }
    .courseintro{
      color: #666666;
      border-radius: 5px;
      font-family: "Arial", sans-serif;
      font-size: 20px;
    }
    .price{
      color: red;
      font-size: 40px;

    }
    .price i{
      display: block;
      color: #666666;
      border-radius: 5px;
      font-family: "Arial", sans-serif;
      font-size: 20px;
    }

  </style>
</head>
<body>
<div id="app">
  <el-container >
    <!--头,引入my-header.js-->
    <el-header>
      <my-header></my-header>
    </el-header>
    <el-main class="center">
      <div style="width: 1400px ; margin: 0 auto ">
        <el-row gutter="20" >
          <el-col span="10" class="left" style="bottom: 0px">
              <img :src="imgeurl" style="width: 100%;height: 80%;border-radius: 5px;">
          </el-col>

          <el-col span="10" class="right">
            <div class="coursetitle"><span >{{title}}</span></div>
            <div class="courseintro">
              <span>
              视频简介:
              </span>
              <span style="display: block">{{intro}}</span>
            </div>
            <div class="price">
              <span>￥: {{price}}</span>
              <i class="el-icon-user-solid">已购人数:{{boughtnum}}人</i>
            </div>
            <div class="button"><el-button type="danger" round size="mini" style="width: 140px;height: 60px" @click="handleBuy">立即购买</el-button></div>
          </el-col>
          <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClose">
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handle">{{ buttonText }}</el-button>
  </span>
            <span v-if="bought">您已购买该课程！</span>
            <span v-else>
              <span v-if="balanceEnough">购买成功！</span>
               <span v-else>余额不足，请充值！</span>
            </span>
          </el-dialog>
        </el-row>
      </div>
      <div>
        <el-row style="margin-top: 10px">
          <el-col span="3">
            <p style="font-size: 28px;line-height: 65px;margin: 0">相关推荐</p>
          </el-col>
        </el-row>
        <el-row gutter="25">
          <el-col v-for="r in recommend" span="6">
            <el-card style="margin: 10px 0">
              <a class="vodeolist" style="color: #333;text-decoration: none; position: relative; display: inline-block;" :href="'/course.html?bvid='+r.bvid">
                <img :src="r.imgeurl" width="100%" height="144" style="cursor: pointer;">
                <div class="play-button"></div>
                <p style="height: 40px; cursor: pointer;overflow: hidden;
                                      display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical">{{r.coursename}}</p>
              </a>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>

  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/my-header.js"></script>
<script src="js/my-footer.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {

      return {
        user:localStorage.user?JSON.parse(localStorage.user):null,
        userCourse:{user_id:"",bvid:"",time:"",price:''},
        price:'',
        title:'',
        intro:'',
        boughtnum:'',
        imgeurl:'',
        courseArr:[],
        dialogVisible: false,
        balanceEnough:'',  //余额是否足够
        bought: '',  //是否已经购买
        balance:'',  //余额
        recommend:[]
      }
    },

    methods: {
      handleClose(done) {
        this.$confirm('确定退出')
                .then(_ => {
                  done();
                })
                .catch(_ => {
                });
      },
      handle() {
        if (!this.bought && !this.balanceEnough) {
          // 余额不足时，跳转到充值页面
          location.href = '/recharge.html';
        } else {
          let bvid = new URLSearchParams(location.search).get("bvid");
          // 购买成功或已购买时，跳转到学习页面
          location.href = '/video.html?bvid=' + bvid;
        }
      },
      handleBuy() {
        if (v.bought) {
          // 如果已经购买，则提示已购买
          v.dialogVisible = true;
        } else {
          if (v.balance >= v.price) {
            v.balance -= v.price;    // 扣除购买费用
            v.boughtnum++;
            v.balanceEnough = true;     // 设置余额充足标志为 true
            v.dialogVisible = true;
            //修改用户余额
            let user_id = localStorage.user?JSON.parse(localStorage.user).userid:null;
            let bvid = new URLSearchParams(location.search).get("bvid");
            axios.post("/v1/users/updatebalance/"+user_id+"/"+v.balance).then(function (response) {

            });
            //修改已经购买数量
            axios.post("/v1/courses/updateboughtnum/"+bvid+"/"+v.boughtnum).then(function (response) {

            });
            //添加到用户课程表
            v.userCourse.bvid = bvid;
            v.userCourse.user_id = user_id;
            v.userCourse.price = v.price;
            console.log(v.userCourse);
            axios.post("/v1/usercourses/insert",v.userCourse).then(function (response) {

            })
          } else {
            v.balanceEnough = false;    // 设置余额充足标志为 false
            v.dialogVisible = true;
          }
        }
      }
    },

    created:function () {
      let user_id = localStorage.user?JSON.parse(localStorage.user).userid:null;
      let bvid = new URLSearchParams(location.search).get("bvid");
      axios.get("/v1/courses/"+bvid).then(function (response) {
        v.price = response.data.data.price;
        v.title = response.data.data.coursename;
        v.intro = response.data.data.description;
        v.boughtnum = response.data.data.boughtnum;
        v.imgeurl = response.data.data.imgeurl;
      }),

       //判断是否已购买
      axios.get("/v1/usercourses/"+user_id+"/"+bvid).then(function (response) {
           v.bought = response.data.data;
      }),
      //获取用户余额
      axios.get("/v1/users/balance/"+user_id).then(function (response) {
           v.balance = response.data.data;

      }),
      axios.get("/v1/courses/recommend/"+bvid).then(function (response) {
           v.recommend = response.data.data;
      })

    },
    computed: {
      buttonText() {
        if (this.bought) {
          return '前往学习';
        } else if (this.balanceEnough) {
          return '前往学习';
        } else {
          return '立即充值';
        }
      }
    }

  })
</script>
</html>